<template>
  <div class="add-notify">
    <div>
      <label>{{ $t("route.base") }}</label>
      <div></div>
      <button>
        <img /><label>{{ $t("route.Add_notification") }}</label>
      </button>
    </div>
    <div>
      <el-form style="width: 50%" label-width="100px">
        <el-form-item :label="$t('route.title')">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item :label="$t('route.content')">
          <el-input v-model="form.content" type="textarea" />
        </el-form-item>
        <el-form-item :label="$t('route.kind')">
          <el-radio-group @change="typeChange" v-model="form.type">
            <el-radio-button
              v-show="index != 0"
              v-for="(item, index) in noticeTypeList"
              :label="index"
            >
              {{ item }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.type == 2" :label="$t('route.position')">
          <el-radio-group @change="roleChange" v-model="form.role">
            <el-radio-button v-for="item in roleList" :label="item.id">
              {{ item.name }}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="addClick" type="primary">{{ $t("route.Add") }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import Constant from "../../js/common/constant.js";
import i18n from "../../i18n/index";
export default {
  data() {
    return {
      form: {
        title: null,
        content: null,
        type: 2,
        role: 16,
      },
      noticeTypeList: Constant.NOTICE_TYPE_LIST,
      roleList: [
        {
          id: 15,
          name: i18n.global.t("route.General_workers"),
        },
        {
          id: 16,
          name: i18n.global.t("route.Mechanic"),
        },
      ],
    };
  },
  methods: {
    typeChange() {
      if (this.form.type == 2) {
        this.form.role = 16;
      } else {
        this.form.role = null;
      }
    },

    addClick() {
      if (CommonUtils.isEmpty(this.form.title)) {
        this.$message.error(i18n.global.t("route.Title_cannot_be_empty"));
        return;
      }
      if (CommonUtils.isEmpty(this.form.content)) {
        this.$message.error(i18n.global.t("route.Content_cannot_be_empty"));
        return;
      }
      http.post(
        api.ADD_NOTICE,
        {
          adminId: this.$store.state.user.id,
          title: this.form.title,
          content: this.form.content,
          type: this.form.type,
          role: this.form.role,
        },
        (data) => {
          this.$message.success(i18n.global.t("route.Successfully_added"));
          this.$router.push("/notice");
        }
      );
    },
    getAllWorkshop() {
      http.post(
        api.GET_ALL_WORKSHOP,
        {
          adminId: this.$store.state.user.id,
          factory: Constant.FACTORY == "全部工厂" ? null : Constant.FACTORY,
        },
        (data) => {
          this.workshopList = data.data;
          this.workshopList.splice(0, 0, {
            id: null,
            name: i18n.global.t("route.All_teams"),
            code: i18n.global.t("route.All_teams"),
          });
        }
      );
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.add-notify {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div:nth-of-type(1) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    > label:nth-of-type(1) {
      font-weight: 600;
    }

    > div:nth-of-type(1) {
      width: 1px;
      background-color: #cccccc;
      height: 15px;
      margin: 0px 20px;
    }

    > button:nth-of-type(1) {
      background-image: url(../../assets/img/customer-1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      padding: 5px 10px;
      border: 0px;
      display: flex;
      color: #ffffff;
      flex-direction: row;
      align-items: center;
      font-weight: 800;

      > img {
        margin-right: 7px;
        width: 15px;
        height: 15px;
        content: url(../../assets/img/customer-2.png);
      }
    }
  }

  > div:nth-of-type(2) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
  }
}
</style>
